<template>
  <div :id="props.containerId" class="poiContainer"></div>
  <div id="pickerBox">
    <el-input id="pickerInput" v-model="inputVal" placeholder="输入关键字搜索" clearable />
    <div id="poiInfo"></div>
  </div>
</template>
<script setup name="MapPoi">
import { initMap } from '@/utils/map';
const inputVal = ref('');
const props = defineProps({
  containerId: {
    type: String,
    default: 'container'
  }
})


/** 申明map对象 */
const Map = shallowReactive({
  myMap: {},
  map: null,
  marker: null,
  infoWindow: null,
  poi: {},
  poiPicker: null,
})

// 重置地图相关属性
function resetMap() {
  // Map.myMap = {}
  // Map.map = null
  Map.marker = null
  Map.infoWindow = null
  Map.poi = {}
  Map.poiPicker = null

  inputVal.value = ''
}

async function newMap(poiParams = {}) {
  resetMap()

  Map.myMap = await initMap();

  if (Map.map == null) {
    Map.map = new Map.myMap.Map(props.containerId, {
      zoom: 11
    })
  } else {
    Map.map.clearMap();
  }

  Map.marker = new Map.myMap.Marker({
    draggable: true,
    anchor: "top-left",
    offset: new Map.myMap.Pixel(-10, -34),
  })

  Map.infoWindow = new Map.myMap.InfoWindow({
    anchor: 'middle-right',
    offset: new Map.myMap.Pixel(-15, -24),
  });

  Map.poiPicker = new AMapUI.PoiPicker({
    input: 'pickerInput'
  })

  if (Object.keys(poiParams).length > 0) {
    Map.poi = {
      name: poiParams.name,
      address: '已选择的点',
      district: poiParams.areaName,
      location: {
        lng: poiParams.longitude,
        lat: poiParams.latitude,
      }
    }
    Map.marker.setMap(Map.map);
    Map.marker.setPosition([Map.poi.location.lng, Map.poi.location.lat]);
    setWindowInfo()
    Map.map.setCenter(Map.marker.getPosition());
  }

  poiPickerReady(Map.poiPicker)

  // 点拖拽开始
  Map.marker.on('dragstart', function () {
    Map.infoWindow.close();
  })

  // 点拖拽中
  Map.marker.on('dragging', function (e) {
    // console.log(e)
    Map.marker.setLabel({
      anchor: "top-left",
      offset: new Map.myMap.Pixel(8, -2),
      content: '<div>' + e.target._position.toString() + '</div>',
      direction: 'right'
    });
  })

  // 点拖拽完成
  Map.marker.on('dragend', function (e) {
    let location = e.target._position.toString()
    let array = location.split(',')
    Map.poi = {
      name: '自定义拖拽点',
      address: '',
      district: '',
      location: { lng: array[0], lat: array[1] }
    }
    Map.marker.setLabel({ content: null })
    setWindowInfo();
    setLnglat(location)
  })
}

/** 初始化poiPicker搜索 */
function poiPickerReady(poiPicker) {
  poiPicker.on('poiPicked', function (poiResult) {
    Map.infoWindow.close()
    Map.poi = poiResult.item;
    Map.marker.setMap(Map.map);
    Map.marker.setPosition(Map.poi.location);
    setWindowInfo();
    Map.map.setCenter(Map.marker.getPosition());
    setLnglat(Map.poi.location.toString());
  });
}

/** 创建信息窗体 */
function setWindowInfo() {
  Map.infoWindow.setContent('<div style="font-weight: bolder; color: #000; font-size: 13px; width: 200px; line-height: 26px;">' + Map.poi.name + '</div>'
    + '<div style="width: 200px; color: #666666; line-height: 20px; font-size: 10px;">'
    + '地址：' + Map.poi.address
    + '<br>地区：' + Map.poi.district
    + '<br>坐标：' + Map.poi.location.lng + ',' + Map.poi.location.lat
    + '<div>');
  Map.infoWindow.open(Map.map, Map.marker.getPosition());
}

const emit = defineEmits(['emitLngLat'])

/** 设置经纬度 */
function setLnglat(string = '') {
  if (!string) {
    return false;
  }
  let array = string.split(',')
  emit('emitLngLat', {
    longitude: array[0],
    latitude: array[1]
  })
}

/** 暴露子组件方法等 */
defineExpose({
  newMap,
})

</script>
<style scoped>
.poiContainer {
  padding: 0px;
  margin: 0px;
  width: 100%;
  height: 500px;
}

#pickerBox {
  position: absolute;
  z-index: 9999;
  top: 30px;
  right: 10px;
  width: 240px;
}

#poiInfo {
  background: #fff;
}

.poiContainer :deep(.amap-marker-label) {
  border: 0;
  padding: 0.5rem;
  border-radius: 0.25rem;
  background-color: white;
  width: auto;
  box-shadow: 0 2px 6px 0 #63adff;
}

#pickerBox :deep(.amap-ui-poi-picker-sugg-list) {
  max-height: 350px;
}
</style>
